<template>
   <view class="tabs">
      <view :class="{tabs_item:true,active:index === currentIndex}" v-for="(item,index) in tabsList" :key="item.id" @tap="onChange(index)">{{item.name}}</view>
    </view>
</template>

<script>
export default {
    props:{
        tabsList:{
            type:Array,
            default:[]
        }
    },
    data() {
        return {
            currentIndex:0
        }
    },
    methods:{
        onChange(index){
            this.currentIndex = index
            this.$emit('onChange',this.currentIndex)
        }
    }
}
</script>

<style lang="less">
.tabs{
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    .tabs_item{
      display: flex;
      justify-content: center;
      align-items: center;
      color: #666;
      width: 150rpx;
      height: 60rpx;
      border-bottom: 2rpx solid  transparent;
      &.active{
        border-color: #ea4350;
      }
    }
  }
</style>